---
import { Icon } from 'astro-icon/components';
const { slides } = Astro.props;
---

<div id="main_swiper" class="w-full h-screen">
  <div class="swiper">
    <div class="swiper-wrapper">
      {
        slides.map((item) => (
          <div class="bg_custom_slide swiper-slide flex flex-col gap-4">
            <span
              class:list={['text-[5vw] lg:text-2xl uppercase', 'text-hex']}
              style=`--text_color:${item.text_color};`
              data-swiper-parallax-y="-600"
              data-swiper-parallax-duration="500"
            >
              {item.kicker}
            </span>

            <h2
              class:list={[
                'mb-8 portrait:text-[10vw] md:portrait:text-[12vw] landscape:text-[12vh] leading-[120%]',
                'text-hex'
              ]}
              style=`--text_color:${item.text_color};`
              data-swiper-parallax="-700"
              data-swiper-parallax-duration="600"
            >
              {item.title && <span class="tracking-tighter" set:html={item.title} />}
              <span 
                class:list={['portrait:text-[8vw] italic', 'text-hex']}
                style=`--text_color:${item.text_color};`
              >{item.highlight}</span>
            </h2>

            <a
              data-swiper-parallax="-800"
              data-swiper-parallax-duration="700"
              href={item.btn_href}
              class='uppercase py-2 px-4 w-fit h-fit text-[4vw] lg:text-2xl flex gap-4 overflow-hidden font-bold' 
              style=`--text_color:${item.btn_text_color};--bg_color: ${item.btn_bg_color};`
            >
              <p> 查看 </p>
              <img src="/svg/flecha.svg" alt="flecha" class=`${item.invert_arrow_color ? 'invert': 'invert-0'}` />
            </a>
          </div>
        ))
      }
    </div>

    <div class="swiper-pagination" />

    <div class="w-full absolute bottom-0 z-10 flex lg:hidden items-center justify-between p-8 pb-16">
      <div class="flex flex-col gap-2">
        <div class="flex gap-2">
          {
            slides.map((item, index) => (
              index == 0 
                ? <div class="slider-indicator h-2 rounded-lg transition-all w-16 bg-loco-purple"></div>
                : <div class="slider-indicator h-2 rounded-lg transition-all w-4 bg-[#3C3C3C]"></div>
            ))
          }
        </div>
        <span class="font-bold font-futura">© XIANGLONG ZHIYUN 2023</span>
      </div>

      <div class="flex items-center gap-2">
        <div id="prev_btn" class="swiper-button-disabled text-4xl text-loco-red transition-all">
          <Icon name="bi:arrow-left-circle" class="left-circle" />
          <Icon name="bi:arrow-left-circle-fill" class="left-circle-fill" />
        </div>
        <div id="next_btn" class="text-4xl text-loco-red transition-all">
          <Icon name="bi:arrow-right-circle" class="right-circle" />
          <Icon name="bi:arrow-right-circle-fill" class="right-circle-fill" />
        </div>
      </div>
    </div>
  </div>
</div>

<style is:global>
  @import url('https://fonts.cdnfonts.com/css/futura-condensed-pt');

  .left-circle-fill,
  .right-circle-fill {
    display: block;
  }
  .swiper-button-disabled > .left-circle-fill,
  .swiper-button-disabled > .right-circle-fill {
    display: none;
  }
  .left-circle,
  .right-circle {
    display: none;
  }
  .swiper-button-disabled > .left-circle,
  .swiper-button-disabled > .right-circle {
    display: block;
  }
</style>

<style>
  .swiper,
  main {
    position: relative;
  }

  .swiper {
    height: 100%;
    width: 100%;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 2rem 0 6rem;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .progress-bg {
    background-color: #fff;
  }

  .pl-open-menu {
    padding-left: 400px;
  }

  @media screen and (max-width: 1023px) {
    .swiper-slide {
      justify-content: flex-start;
      padding: 15vh 2rem 2rem;
    }

    .pl-open-menu {
      padding-left: 2rem;
    }
  }

  .bg-loco-purple {
    --tw-bg-opacity: 1;
    background-color: rgb(32 38 178/var(--tw-bg-opacity));
  }

  .text-loco-red {
    --tw-text-opacity: 1;
    color: rgb(246 76 113 / var(--tw-text-opacity));
  }

  .font-futura {
    font-family: 'Futura Condensed PT', sans-serif;
    font-weight: 200;
  }

  a {
    background-color: var(--bg_color);
    color: var(--text_color);
  }

  .text-hex {
    color: var(--text_color);
  }
</style>

<script>
  import { Swiper } from 'swiper';
  import { Navigation, Pagination, Parallax, Mousewheel} from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/css/pagination';
  
  const prev = document.getElementById("prev_btn");
  const next = document.getElementById("next_btn");
  const swiper = new Swiper(".swiper",{
    modules: [Navigation, Pagination, Parallax, Mousewheel],
    direction: "horizontal",
    slidesPerView: 1,
    spaceBetween: 0,
    mousewheel: {
      forceToAxis: true,
      sensitivity: .5
    },
    pagination: {},
    parallax: true,
    breakpoints: {
      1024: {
        direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
          type: "progressbar"
        }
      }
    }
});

// 编程实现mobile屏幕的pagination and navigator
prev.addEventListener("click", ()=>{
  swiper.slidePrev()
}
);
next.addEventListener("click", ()=>{
  swiper.slideNext()
}
);
const setNavigator = ()=>{
  prev.classList.toggle("swiper-button-disabled", swiper.isBeginning);
  next.classList.toggle("swiper-button-disabled", swiper.isEnd);
};

const pageBullets = [...document.querySelectorAll(".slider-indicator")];
const setPagination = activeIndex=>{
  pageBullets.map((item,i)=>{
      i == activeIndex 
        ? (item.classList.remove("w-4", "bg-[#3C3C3C]"), item.classList.add("w-16", "bg-loco-purple")) 
        : (item.classList.remove("w-16", "bg-loco-purple"), item.classList.add("w-4", "bg-[#3C3C3C]"))
  })
};

swiper.on("activeIndexChange", ()=>{
  setPagination(swiper.activeIndex);
  setNavigator()
});

// direction=vertical时，滚动效果
swiper.on("progress", ()=>{
    swiper.progress == 1 && !swiper.isHorizontal() && swiper.disable()
});
document.addEventListener("scroll", ()=>{
    swiper.progress == 1 && window.scrollY == 0 && swiper.enable()
});
</script>

<script define:vars={{ slides }}>
  (function () {
    //SELECTOR BACKGROUND DEPENDIENTO ORIENTACION
    const bg_custom_slides = [...document.querySelectorAll('.bg_custom_slide')];

    const setBackground = () => {
      const w_height = window.innerHeight;
      const w_width = window.innerWidth;

      bg_custom_slides.map((x, index) => {
        x.style.backgroundImage = w_width > w_height ? slides[index].background : slides[index].background_movil;
      });
    };

    setBackground();
    window.addEventListener('resize', () => {
      setBackground();
    });
  })();
</script>
